<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.aClass{
			color: red;
		}
		.bClass{
			color: blue;
		}
		.cClass{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div id="app">
		<h2>class绑定</h2>
		<p class="cClass" :class="a">xxx是字符串</p>
		<p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
		<p :class="['aClass','cClass']">xxx是数组</p>
		

		<h2>style绑定</h2>
		<p :style="{color:activeColor,fontSize:fontSize+'px'}">style变化</p>
		<button @click="update">更新</button>
	</div>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				a:'aClass',
				isA:true,
				isB:false,
				activeColor:'red',
				fontSize:20
			},
			methods: {
				update() {
					this.a = 'bClass'
					this.isA = !this.isA
					this.isB = !this.isB
					this.activaColor = 'green'
					this.fontSize = 30
				}
			}
		});
	</script>
</body>
</html>